<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile">


<ui:composition template="../../template/mobile-template.xhtml">


	<ui:define name="content">
		<script>
			function ext() {

				//this = chart widget instance
				//this.cfg = options
				//this.cfg.highlighter = "false";
				//this.cfg.cursor.show = "true";
				//this.cfg.cursor.showTooltip = "true";
				//this.cfg.cursor.tooltipLocation = "sw";
				this.cfg.axes.yaxis.tickOptions.formatString = "%.2f";
				this.cfg.highlighter.tooltipContentEditor = tooltipContentEditor;
				//console.log(this.cfg);
			}

			function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
				// display series_label with x and y values value 
				//console.log(plot.legend.labels);
				//	console.log(seriesIndex); 
				var toolTip = "<div>" + plot.series[seriesIndex].label + ":"
						+ str + "</div>";
				return toolTip;
			}
		</script>
		<f:facet name="last">
			<h:outputStylesheet name="welcome_styles.css" library="styles" />
		</f:facet>
		<pm:page>
			<pm:header title="Dollar Analysis Engine"></pm:header>
			<pm:content>
				<h:form>
					<p:panelGrid styleClass="dataTable">
						<p:row>
							<p:column styleClass="loginForm">
								<h:panelGrid columns="2" columnClasses="left,right">
									<p:chart type="line"
										model="#{dollarRateChartBean.dollarRatesChart}"
										style="height:100%" widgetVar="chart" />
								</h:panelGrid>
							</p:column>
						</p:row>
					</p:panelGrid>
					<p:commandButton type="button" value="Reset"
						onclick="PF('chart').resetZoom()" />
				</h:form>
			</pm:content>
		</pm:page>
	</ui:define>

</ui:composition>
</html>